<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style>
			
			table{
				width: 300px;
				height: 300px;
				border:  1px solid red;
			}
			
			.mytd{
				background-color: green;
			}
			
		</style>
	</head>
	<body>
		<table id="dt9"></table>
	</body>
	
	<script>
		
		window.onload=function(){
			
			console.log(0%3);
			console.log(3%3);
			console.log(6%3);
			
			var dt9 = document.getElementById('dt9');
			
			//1 生成9宫格
			//var tr;
			for(var index =1 ; index<=9;index++){
				var td = document.createElement('td');
				td.innerText=(index);
				
				td.setAttribute('onclick','changeColor();');
				/*td.setAttribute('class','mytd');
				td.setAttribute('id','yourtd');*/
				if(index%3==1){
					var tr2 = document.createElement('tr');
					dt9.appendChild(tr2);
				}
				tr2.appendChild(td);
			}
		}
		
		function changeColor(){
			//只要有事件 天生就由个叫event 对象 td
			
			//可以变成任何样式
			//event.srcElement.backgroundColor='green';
			//event.srcElement.fontSize='14px';
			
			//event.srcElement.bgColor="red";
			event.srcElement.setAttribute('class','mytd');

		}
	</script>
	
</html>
